<template>
    <div class="view">
        <nav-bar backgroundColor="#7bbcff" color="#fff" title="订单确认">
            <div class="back" slot="left" @click="back">
                <i class="iconfont icon-fanhui"></i>
            </div>
        </nav-bar>
        <div class="body">
            <cube-scroll>
                <fillet-card class="order-card">
                    <list-cell slot="content" :showBorder="false" :showArrow="false" v-for="item in orderInfo.Items" :key="item.OrderId">
                        <div class="order-card-item" slot="leftSlot">
                            <div class="picture">
                                <img :src="'http://app.xwbtech.com/'+item.Image">
                            </div>
                            <div class="info">
                                <div class="title ellipsis-2">{{item.CourseName}}</div>
                                <div class="others">
                                    <div class="sign-list">
                                        <span class="sign-item" v-if="item.LtName">{{item.LtName}}</span>
                                    </div>
                                    <div class="price">{{item.Price}}</div>
                                </div>
                            </div>
                        </div>
                    </list-cell>
                </fillet-card>
                <fillet-card class="pay-card" title="请选择支付方式" more="">
                    <div class="payment" slot="content">
                        <cube-radio-group v-model="payment">
                            <div class="payment-list">
                                <cube-radio :option="{'value':'1'}"></cube-radio>
                                <div class="label-text">
                                    <div class="word">学币支付（余额：<i>{{coin}}</i>学币）</div>
                                    <div class="desc">温馨提示：选择学币支付，将无法退款！</div>
                                </div>
                            </div>
                        </cube-radio-group>
                    </div>
                </fillet-card>
                <div class="agree-agreement">
                    <cube-checkbox v-model="agree">
                        同意报名退费协议
                    </cube-checkbox>
                </div>
            </cube-scroll>
        </div>
        <div class="footer">
            <div class="amount">{{orderInfo.Amount}}</div>
            <div class="to-pay" @click="pay" :class="{'no-pay':!agree}">立即支付</div>

        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";

    import NavBar from "@/components/aui/NavBar.vue";
    import FilletCard from "@/components/aui/FilletCard.vue";
    import ListCell from "@/components/aui/ListCell.vue";

    import CommonUnit from "@/unit/CommonUnit";

    @Component({
        components: {
            NavBar, FilletCard, ListCell
        }
    })
    export default class OrderConfirm extends Scene {

        private type: number = 0;
        private orderId: number = 0;
        private coin: number | string = 0;
        private agree: boolean = true;
        private payment: string = "1";


        private orderInfo: object = {};

        @State("UserStore")
        public user!: InterfaceUser;

        @Watch("orderId")
        private async watchOrderId(newVal: number | string): Promise<any> {
            const orderDetailRes = await Http.get(this.api.getOrderDetail, CommonUnit.argumentWithUser(this.user, {orderid: newVal}));
            const coinRes = await Http.get(this.api.getMyCoin, CommonUnit.argumentWithUser(this.user));

            if (orderDetailRes.Success && coinRes.Success) {
                this.orderInfo = orderDetailRes.Data;
                this.coin = coinRes.Data;
            } else {
                (<any> this).$createToast({
                    mask: true,
                    type: "warn",
                    time: 1500,
                    txt: "相关信息获取错误",
                    onTimeout: () => {
                        if (!CommonUnit.responseLoginVerification(orderDetailRes) || !CommonUnit.responseLoginVerification(coinRes)) {
                            this.navigateLoginPage();
                        }
                    }
                }).show();
            }
        }


        private mounted(): void {
            if ((<any> this).$route.query.orderId && (<any> this).$route.query.type) {
                this.orderId = (<any> this).$route.query.orderId;
                this.type = (<any> this).$route.query.type;
            } else {
                this.navigateBack();
            }
        }

        private back(): void {
            this.navigateBack();
        }

        private pay(): void {
            if (this.payment === "1") {
                //    学币支付
                Http.get(this.api.coinPay, CommonUnit.argumentWithUser(this.user, {orderId: this.orderId})).then((res) => {
                    if (res.Success) {
                        this.navigateTo({
                            name: "orderList"
                        });
                    } else {
                        (<any> this).$createToast({
                            mask: true,
                            type: "warn",
                            time: 1500,
                            txt: res.Message,
                            onTimeout: () => {
                                if (!CommonUnit.responseLoginVerification(res)) {
                                    this.navigateLoginPage();
                                } else if (res.Message.indexOf("学币不足") >= 0) {
                                    this.navigateTo({
                                        name: "recharge"
                                    });
                                }
                            }
                        }).show();
                    }
                });
            } else {

            }
        }

    }
</script>

<style scoped lang="stylus">
    .view
        height 100vh;
        background $theme-page-common-background-color

    .body
        height 100vh;
        padding calc(44px + env(safe-area-inset-top)) 0 calc(50px + env(safe-area-inset-bottom)) 0;

    .order-card
        margin-top 10px;

        .order-card-item
            display flex;
            flex-direction row;
            justify-content space-between;

            .picture
                img
                    width 70px;
                    min-height 70px;
                    height auto

            .info
                width calc(100% - 80px);
                padding 5px 0;
                display flex;
                flex-direction column;
                justify-content space-between;

                .title
                    font-size 15px;

                .others
                    display flex;
                    justify-content space-between;
                    align-items center;

                    .sign-list

                        .sign-item
                            display inline-block;
                            height 16px;
                            line-height 16px;
                            padding 1px 7px;
                            margin-right 4px;
                            background $theme-light-color;
                            color #fff;
                            font-size 10px;
                            border-radius 10px;

                    .price
                        color $theme-common-color;
                        font-size 20px;
                        height 25px;
                        line-height 25px;

                        &:before
                            content '¥';
                            font-size 13px;
                            padding-right 2px;

    .pay-card
        margin-top 10px;

        .payment-list
            display flex;
            justify-content space-between;
            align-items center;
            padding 0 12px

            .label-text
                font-size 12px;

                .word
                    font-size 13px;
                    line-height 30px;
                    text-align right

                    i
                        font-size 17px;
                        font-style normal;
                        padding 0 2px;

                .desc
                    line-height 16px;
                    color $theme-light-color;
                    font-size 10px;
                    text-align right
                    padding-bottom 4px;

            >>> .cube-radio
                padding-left 0;

                .cube-radio-ui
                    &:before
                        transform scale(1.7)

                    i
                        transform scale(1.7)

    .agree-agreement
        line-height 30px;
        font-size 12px;
        color $theme-gray-lv1
        padding 0 7px;

        >>> .cube-checkbox
            .cube-checkbox-ui
                padding-right 4px;

                &:before
                    transform scale(1.7)

                i
                    transform scale(1.7)

    .footer
        height calc(50px + env(safe-area-inset-bottom));
        position fixed;
        padding 0 0 env(safe-area-inset-bottom) 10px;
        width 100vw;
        bottom 0;
        background #fff;
        display flex;
        flex-direction row;
        justify-content space-between;
        align-items center;

        .amount
            font-size 20px;
            color $theme-warm-color;

            &:before
                content '合计：¥'
                font-size 13px;
                color #333;
                padding-right 4px;

        .to-pay
            height 35px;
            border-radius 35px;
            width 115px;
            margin-right 10px;
            text-align center;
            background $theme-advancing-color;
            color #fff;
            line-height 38px;

        .no-pay
            opacity .4;

</style>
